<!-- 人员管理-安全题库-试题分类 -->
<template>
    <div class="questionBank">
        <el-card body-style="display: flex; justify-content: flex-end;">
            <el-button type="primary" size="small" @click="onAdd()">添加分类</el-button>
        </el-card>
        <!-- 列表 -->
        <el-card class="boxCard">
            <el-table :data="tableData" stripe style="width: 100%" :height="tableHeight">
                <el-table-column prop="name" label="分类名称"></el-table-column>
                <el-table-column prop="val2" label="考试数量"></el-table-column>
                <el-table-column prop="val3" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.val3 == 1" type="success">显示</el-tag>
                        <el-tag v-if="scope.row.val3 == 2" type="danger">隐藏</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="val4" label="添加时间"></el-table-column>

                <el-table-column fixed="right" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定要删除此分类吗？" @confirm="onDel(scope.row)">
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="boxCard_-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>

        <!-- 弹窗 -->
        <el-dialog :title="formVal == 1 ? '添加分类' : '编辑分类'" :visible.sync="dialogVisible">
            <el-form :model="formData">
                <el-form-item label="分类名称">
                    <el-input class="abcdCl" placeholder="请输入" v-model="formData.name" clearable size="small"></el-input>
                </el-form-item>
                <!-- <el-form-item label="分类状态">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="2">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="postRequest()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {
        apiTrainingCategoryList,
        apiTrainingCategoryAdd,
        apiTrainingCategoryEdit,
        apiTrainingCategoryDel,
    } from '@/api/apifox.js'
    export default {
        components: {},
        data() {
            return {
                tableHeight: window.innerHeight - 380,
                tableData: [
                    {id: 1, name: '理论课程', val2: '8', val3: 1, val4: '2025-10-10 12:00:00',  },
                    {id: 2, name: '施工安全知识', val2: '8', val3: 1, val4: '2025-10-10 12:00:00',  },
                    {id: 3, name: '电工理论知识', val2: '8', val3: 1, val4: '2025-10-10 12:00:00',  },
                ], // 列表
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示条目个数
                total: 4, // 总条目数

                dialogVisible: false, // 对话框
                formData: {
                    name: '', // 分类名称
                    status: 1, // 分类状态
                },
                formVal: 1, // 1添加2修改

                projectId: '',
            };
        },
        computed: {},
        created() {

        },
        mounted() {
            this.projectId = this.$store.state.porjectObject.deptId;
            this.getList();
        },
        methods: {
            getList() {
                apiTrainingCategoryList({
                    deptId: this.projectId,
                    pageSize: this.pageSize, // 分页大小
                    pageNum: this.currentPage, // 分页页码
                }).then(res => {
                    console.log('列表: ', res);
                    if (res.code == 200) {
                        // this.list = res.data.list;
                        // this.total = res.data.total;
                    } else {
                        // this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },

            /* 修改事件 */
            onEdit(row) {
                this.formData = {
                    id: '',
                    name: ''
                }

                this.formVal = 2;

                this.formData = {
                    id: row.id,
                    name: row.name
                }
                console.log(this.formData)
                this.dialogVisible = true
            },

            /* 添加事件 */
            onAdd() {
                this.formData = {
                    id: '',
                    name: ''
                }
                this.formVal = 1;
                this.dialogVisible = true
            },
            postRequest() {
                if(this.formData.name == '') {
                    this.$Message.warning('请输入分类名称！');
                    return
                }
                console.log('请求参：', this.formData)
                if(this.formVal == 1) {
                    apiTrainingCategoryAdd({
                        name: this.formData.name, // 标题
                        deptId: this.projectId,
                    }).then(res => {
                        console.log('新增: ', res);
                        if (res.code == 200) {
                            this.dialogVisible = false
                            this.getList();
                            this.$Message.success("操作成功");
                        } else {
                            // this.$Message.warning(res.msg);
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                } else {
                    apiTrainingCategoryEdit({
                        id: this.formData.id, // id
                        name: this.formData.name, // 标题
                        deptId: this.projectId,
                    }).then(res => {
                        console.log('修改: ', res);
                        if (res.code == 200) {
                            this.dialogVisible = false
                            this.getList();
                            this.$Message.success("操作成功");
                        } else {
                            // this.$Message.warning(res.msg);
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                }

            },

            onDel(row) {
                console.log(row, row.id)
                apiTrainingCategoryDel(row.id).then(res => {
                    console.log('删除: ', res);
                    if (res.code == 200) {
                        this.getList();
                        this.$Message.success("操作成功");
                    } else {
                        // this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        }
    };
</script>

<style lang="scss" scoped>
    .questionBank {
        padding: 20px;

        .ecard_header {
            display: flex;
            align-items: center;
            gap: 10px;

            .ecard_val {
                width: 70%;
            }
        }

        .boxCard {
            margin-top: 20px;

            .boxCard_-pagination {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;
            }
        }

        .abcdCl {
            width: 80%;
        }

        .abcdCls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    }
</style>
